<template>
  <h1>El-表格组件</h1>
  <el-table :data="tableData" style="width: 100%;">
    <el-table-column label="编号" type="index" width="60"></el-table-column>
    <el-table-column label="姓名" prop="name"  ></el-table-column>
    <el-table-column label="地址" prop="address" ></el-table-column>
    <el-table-column label="日期" prop="date" ></el-table-column>
    <el-table-column label="岗位" prop="job"></el-table-column>
  </el-table>
  <hr>

  <el-table :data="arr" >
    <el-table-column type="selection" width="80px" ></el-table-column>
    <el-table-column lable="编号" type="index" width="80" ></el-table-column>
    <el-table-column label="姓名" prop="name" width="180" ></el-table-column>
    <el-table-column label="工资" prop="salary" width="180" ></el-table-column>
    <el-table-column label="工作" prop="job" ></el-table-column>
  </el-table>

</template>


<script setup>

import {ref} from "vue";

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    job:'前端工程师'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    job:'后端工程师'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    job:'项目经理'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    job:'老板'
  },
]

const arr = ref([
  {name:'张三',salary:5000,job:'销售员'},
  {name:'李四',salary:6000,job:'维修员'},
  {name:'王五',salary:7000,job:'护林员'},
  {name:'赵六',salary:8000,job:'程序员'},
]);

</script>

<style scoped>

</style>